<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>长虹[联合运营平台后台管理系统]</title>
		<!-- 全局CSS 开始-->
		<link href="../css/global/bootstrap.min.css" rel="stylesheet" />
		<link href="../css/global/font-awesome.min.css" rel="stylesheet" />
		<link href="../css/global/simple-line-icons.css" rel="stylesheet" />
		<link href="../css/global/animate.css" rel="stylesheet" />
		<link href="../css/global/style.css" rel="stylesheet" />
		<link href="../js/plugins/pace/pace.css" rel="stylesheet" />
		<!-- 全局CSS 结束-->
		<!-- 页面CSS 开始-->
		<!-- 页面CSS 结束-->
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="../js/bootstrap/html5shiv.min.js"></script>
		<script src="../js/bootstrap/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="row page-heading">
				<h4><i class="fa fa-flask"></i>  UI组件 / 按钮Buttons</h4>
			</div>
			<div class="row">
				<div class="col-md-4">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>彩色按钮  <small>Colors buttons</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>
							运用不同的class，做出不同颜色的button
							</p>
							
							<h5 class="font-bold">
							默认大小
							</h5>
							<p>
							<button type="button" class="btn btn-w-m btn-default">Default</button>
							<button type="button" class="btn btn-w-m btn-primary">Primary</button>
							<button type="button" class="btn btn-w-m btn-success">Success</button>
							<button type="button" class="btn btn-w-m btn-info">Info</button>
							<button type="button" class="btn btn-w-m btn-warning">Warning</button>
							<button type="button" class="btn btn-w-m btn-danger">Danger</button>
							<button type="button" class="btn btn-w-m btn-white">Danger</button>
							<button type="button" class="btn btn-w-m btn-link">Link</button>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>不同的尺寸 <small>Diferent size</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>
							加上以下class：更大的尺寸large <code>.btn-lg</code>, 小号的尺寸small<code>.btn-sm</code>, 更小的尺寸extra small <code>.btn-xs</code>.
							</p>
							<h5 class="font-bold">不同的尺寸</h5>
							<p>
							<button type="button" class="btn btn-primary btn-lg">加大btn-lg</button>
							<button type="button" class="btn btn-default btn-lg">加大btn-lg</button>
							<br/>
							<button type="button" class="btn btn-primary">默认大小</button>
							<button type="button" class="btn btn-default">默认大小</button>
							<br/>
							<button type="button" class="btn btn-primary btn-sm">小号btn-sm</button>
							<button type="button" class="btn btn-default btn-sm">小号btn-sm</button>
							<br/>
							<button type="button" class="btn btn-primary btn-xs">加小btn-xs</button>
							<button type="button" class="btn btn-default btn-xs">加小btn-xs</button>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>外框型和block型</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>
							block型 <code>.btn-block</code>   外框型 <code>.btn-outline</code>.
							</p>
							
							<h5 class="font-bold">外框型</h5>
							<p>
							<button type="button" class="btn btn-outline btn-default">Default</button>
							<button type="button" class="btn btn-outline btn-primary">Primary</button>
							<button type="button" class="btn btn-outline btn-success">Success</button>
							<button type="button" class="btn btn-outline btn-info">Info</button>
							<button type="button" class="btn btn-outline btn-warning">Warning</button>
							<button type="button" class="btn btn-outline btn-danger">Danger</button>
							<button type="button" class="btn btn-outline btn-link">Link</button>
							</p>
							<h5 class="font-bold">block型</h5>
							<p>
							<button type="button" class="btn btn-block btn-outline btn-primary">Primary</button>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>3D 按钮</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<h5 class="font-bold">3D buttons</h5>
							<p>
							添加class <code>.dim</code> .
							</p>
							<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i></button>
							<button class="btn btn-success dim btn-large-dim" type="button"><i class="fa fa-warning"></i></button>
							<button class="btn btn-danger  dim btn-large-dim" type="button"><i class="fa fa-heart"></i></button>
							<button class="btn btn-warning  dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button>
							<button class="btn btn-info  dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i></button>
							<button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i></button>
							<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i></button>
							<button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i></button>
							<button class="btn btn-success  dim" type="button"><i class="fa fa-upload"></i></button>
							<button class="btn btn-info  dim" type="button"><i class="fa fa-paste"></i> </button>
							<button class="btn btn-warning  dim" type="button"><i class="fa fa-warning"></i></button>
							<button class="btn btn-default  dim " type="button"><i class="fa fa-star"></i></button>
							<button class="btn btn-danger  dim " type="button"><i class="fa fa-heart"></i></button>
							
							<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i></button>
							<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i></button>
							<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i></button>
							<button class="btn btn-outline btn-success  dim" type="button"><i class="fa fa-upload"></i></button>
							<button class="btn btn-outline btn-info  dim" type="button"><i class="fa fa-paste"></i> </button>
							<button class="btn btn-outline btn-warning  dim" type="button"><i class="fa fa-warning"></i></button>
							<button class="btn btn-outline btn-danger  dim " type="button"><i class="fa fa-heart"></i></button>
							
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>下拉button</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<h5 class="font-bold">下拉button</h5>
							<p>
							多选项下拉button
							</p>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-success dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
							
							<br/>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-success btn-sm dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
							<br/>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-success btn-xs dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">选项 <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="#">选项一</a></li>
									<li><a href="#" class="font-bold">选项二</a></li>
									<li><a href="#">选项三</a></li>
									<li class="divider"></li>
									<li><a href="#">选项四（分割线）</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>按钮组</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>
							几个按钮组合起来，尺寸控制只需在btn-group后加上<code>.btn-group-sm</code>或者<code>.btn-group-xs</code>
							</p>
							
							<h5 class="font-bold">按钮组</h5>
							<div class="btn-group">
								<button class="btn btn-white" type="button">Left</button>
								<button class="btn btn-white" type="button">Middle</button>
								<button class="btn btn-white" type="button">Right</button>
							</div>
							<br/>
							<div class="btn-group btn-group-sm">
								<button class="btn btn-white" type="button">Left</button>
								<button class="btn btn-white" type="button">Middle</button>
								<button class="btn btn-white" type="button">Right</button>
							</div>
							<br/>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-white" type="button">Left</button>
								<button class="btn btn-white" type="button">Middle</button>
								<button class="btn btn-white" type="button">Right</button>
							</div>
							<!--<br/>
							<br/>
							<div class="btn-group">
									<button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i></button>
									<button class="btn btn-white">1</button>
									<button class="btn btn-white  active">2</button>
									<button class="btn btn-white">3</button>
									<button class="btn btn-white">4</button>
									<button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i> </button>
							</div>-->
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>嵌入图标的button</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<h5 class="font-bold">常用嵌入图标</h5>
							<p>
							在button里嵌入图标
							</p>
							<p>
							<button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;&nbsp;提交</button>
							<button class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;上传</button>
							<button class="btn btn-info " type="button"><i class="fa fa-paste"></i>&nbsp;&nbsp;编辑</button>
							<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i>&nbsp;&nbsp;信息</button>
							<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;地图</button>
							
							<a class="btn btn-success btn-facebook">
								<i class="fa fa-weibo"> </i>&nbsp;&nbsp;微博登录
							</a>
							<a class="btn btn-success btn-facebook btn-outline">
								<i class="fa fa-weibo"> </i>&nbsp;&nbsp;微博登录
							</a>
							<a class="btn btn-white btn-bitbucket">
								<i class="fa fa-user-md"></i>
							</a>
							<a class="btn btn-white btn-bitbucket">
								<i class="fa fa-group"></i>
							</a>
							<a class="btn btn-white btn-bitbucket">
								<i class="fa fa-wrench"></i>
							</a>
							<a class="btn btn-white btn-bitbucket">
								<i class="fa fa-exchange"></i>
							</a>
							<a class="btn btn-white btn-bitbucket">
								<i class="fa fa-check-circle-o"></i>
							</a>
							<a class="btn btn-white btn-bitbucket">
								<i class="fa fa-road"></i>
							</a>
							<a class="btn btn-white btn-bitbucket">
								<i class="fa fa-ambulance"></i>
							</a>
							<a class="btn btn-white btn-bitbucket">
								<i class="fa fa-star"></i>&nbsp;&nbsp;收藏
							</a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>扩展button</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<h5 class="font-bold">改变按钮状态</h5>
							<p>改变按钮状态，添加 <code>data-loading-text="加载中..."</code> </p>
							<p>
							<button type="button" id="myButton" data-loading-text="加载中..." class="btn btn-primary" autocomplete="off">
							加载状态
							</button>
							</p>
<pre>
&lt;button type="button" id="myButton" data-loading-text="加载中..." class="btn btn-primary"&gt;加载状态&lt;/button&gt;
&lt;!-- loading button --&gt;
&lt;script&gt;
  $('#myButton').on('click', function () {
var btn = $(this)
btn.button('loading');
setTimeout(function () {
  btn.button('reset');
}, 3000)
  })
&lt;/script&gt;
</pre>
							<h5 class="font-bold">切换式button</h5>
							<p>改变按钮状态，添加 <code>data-toggle="button"</code> </p>
							<button data-toggle="button" class="btn btn-primary btn-outline" type="button" autocomplete="off">Single Toggle</button>
							<button data-toggle="button" class="btn btn-primary" type="button" autocomplete="off">Single Toggle</button>
							<button data-toggle="button" class="btn btn-success" type="button" autocomplete="off">Single Toggle</button>
							<h5 class="font-bold">多选按钮checkbox</h5>
							<p>改变按钮状态，添加 <code>data-toggle="button"</code> </p>
							<div class="btn-group" data-toggle="buttons">
								<label class="btn btn-white active">
									<input type="checkbox" autocomplete="off" checked="" /> Checkbox 1 (预选择)
								</label>
								<label class="btn btn-white">
									<input type="checkbox" autocomplete="off" /> Checkbox 2
								</label>
								<label class="btn btn-white">
									<input type="checkbox" autocomplete="off" /> Checkbox 3
								</label>
							</div>
							<h5 class="font-bold">单选按钮radio</h5>
							<p>改变按钮状态，添加 <code>data-toggle="button"</code> </p>
							<div class="btn-group" data-toggle="buttons" id="radio1">
								<label class="btn btn-white active">
									<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> Radio 1 (预选择)
								</label>
								<label class="btn btn-white">
									<input type="radio" name="options" id="option2" autocomplete="off" /> Radio 2
								</label>
								<label class="btn btn-white">
									<input type="radio" name="options" id="option3" autocomplete="off" /> Radio 3
								</label>
							</div>
							<br/><br/>
							<p>更多详情参考<a href="http://v3.bootcss.com/javascript/#buttons" target="_blank">bootstrap button more option</a></p>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>原型button</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>
							添加 <code>.btn-circle</code> .
							</p>
							<button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
							</button>
							<button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
							</button>
							<button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
							</button>
							<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
							</button>
							<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
							</button>
							<button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
							</button>
							<button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i>
							</button>
							<br/>
							<br/>
							<button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
							</button>
							<button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i>
							</button>
							<button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i>
							</button>
							<button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
							</button>
							<button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i>
							</button>
							<button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i>
							</button>
							<button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i>
							</button>
							
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>圆角button</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>
							添加 <code>.btn-rounded</code>
							</p>
							<p>
							<a class="btn btn-default btn-rounded" href="#">Default</a>
							<a class="btn btn-primary btn-rounded" href="#">Primary</a>
							<a class="btn btn-success btn-rounded" href="#">Success</a>
							<a class="btn btn-info btn-rounded" href="#">Info</a>
							<a class="btn btn-warning btn-rounded" href="#">Warning</a>
							<a class="btn btn-danger btn-rounded" href="#">Danger</a>
							<a class="btn btn-danger btn-rounded btn-outline" href="#">Danger</a>
							<br/>
							<br/>
							<a class="btn btn-primary btn-rounded btn-block" href="#"><i class="fa fa-info-circle"></i> Block 圆角按钮</a>
							</p>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<!-- 全局js 开始-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap/bootstrap.min.js"></script>
		<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="../js/custom/custom.js"></script>
		<script src="../js/plugins/pace/pace.min.js"></script>
		<!-- 全局js 结束-->
		<!-- 页面js 开始-->
		<!-- iframeResizer -->
		<!-- <script src="../js/plugins/iframeResizer/iframeResizer.contentWindow.min.js"></script> -->
		<!-- loading button -->
		<script>
		$('#myButton').on('click', function () {
			var btn = $(this)
		btn.button('loading');
		setTimeout(function () {
		btn.button('reset');
		}, 3000)
		})
		</script>
		<!-- 页面js 结束-->
	</body>
</html>